<template>
	<view class="login">
		<view class="img">
			<image src="../../static/dd.png"></image>
		</view>
		<view class="form">
			<input type="number" v-model="phone" placeholder="请输入手机号" placeholder-class="#ededed" />
			<view class="code">
				<input type="number" v-model="code" placeholder="请输入验证码" placeholder-class="#ededed" /> 
				<text v-if="time === 60" style="border: 1px solid #d2152e; color: #d2152e;" @click="goCode" class="getCode">点击获取</text>
				<text v-else style="background-color: #ededed;" class="getCode">{{time}}s后从新获取</text>
			</view>
		</view>
		<view class="bottom">
			<view class="register">
				<button v-if="true" type="default" class="btn">登录/注册</button>
				<button v-else type="default" style="background-color: #d4132d;" class="btn">登录/注册</button>
			</view>
			<view class="deal">创建账户即代表宁同意 <text>客户隐私政策</text></view>
			<view class="txt">
				<text class="line"></text><text class="hint">推荐使用微信登录</text><text class="line"></text>
			</view>
			<button class="wxLogin" type="primary">微信一键登录</button>
		</view>
		<byd-dialog :isShow="isShow" />
	</view>
</template>

<script>
	import bydDialog from '../../components/bydDialog.vue'
	export default {
		components: {
			bydDialog
		},
		data () {
			return {
				phone : '1234',
				code: '',
				time: 60.,
				isShow: true
			}
		},
		methods:{
			goCode () {
				this.time = 59
				let myTime = null
				myTime = setInterval(() =>{
					this.time --
					if (this.time === 0) {
						this.time = 60
						clearInterval(myTime)
					}
				},1000)
			}
		}
	}
</script>

<style lang="less" scoped>
	.login {
		padding: 0 30rpx;
	}
	.img {
		image {
			padding: 180rpx 0;
			display: block;
			margin: 0 auto;
			width: 400rpx;
			height: 140rpx;
		}
	}
	.form {
		input {
			height: 70rpx;
			border-bottom: 1px solid #ededed;
			margin-top: 20rpx;
		}
		.code {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #ededed;
			input {
				width: 1;
			}
			.getCode {
				display: inline-block;
				padding: 10rpx 18rpx;
				border: 1px solid #ccc;
				color: #999;
				font-size: 14px;
			}
		}
	}
		.bottom {
			padding: 100rpx 50rpx 0;
			.register {
				.btn {
					width: 600rpx;
					height: 80rpx;
					background-color: #cccccc;
					color: #fff;
					font-size: 16px;
				}
			}
			.deal {
				font-size: 14px;
				text {
					color: #eb304e;
					font-weight: 700;
					margin-left: 8rpx;
				}
			}
			.txt {
				display: flex;
				align-items: center;
				margin-top: 140rpx;
				.line {
					display: inline-block;
					width: 160rpx;
					height: 2rpx;
					background-color: #d3d3d3;
				}
				.hint {
					font-size: 14px;
					color: #8e8e8e;
					margin: 0 20rpx;
					line-height: 10rpx;
				}
			}
			.wxLogin {
				margin-top: 60rpx;
				font-size: 16px;
			}
		}
</style>
